import React, { FC, useCallback } from 'react';
import { View, Text, ScrollView } from '@tarojs/components';
import { styled } from 'linaria/react';
import { useClassName } from '@/utils/index';
import MessageItem from '../MessageItem/MessageItem';
import { useMessageExhibitionList } from '../MessageContex';
import { apiPutSetRead } from '@/pages/_server/_api/ApiMessage/apiPutSetRead';
import { apiGetMessageList } from '@/pages/_server/_api/ApiMessage/apiGetMessageList';
import LoadingComponent from '@/pages/MyCollection/LoadingComponent/LoadingComponent';
export interface IProps extends ICompProps {}
UnreadMessages.defaultProps = {} as Partial<IProps>;
function UnreadMessages(props: IProps) {
    const { className, style } = props;
    const localClassName = useClassName('UnreadMessages', className);
    const { messageExhibitionState, messageExhibitionDispatch,freShListState } = useMessageExhibitionList('Unread');
    const handleClick = async (item) => {
        console.log('点击了消息');
        if (item.haveRead == 1) return;
        let res = await apiPutSetRead(item.id);
        if (res) {
            messageExhibitionDispatch({
                type: 'setIsRead',
                payload: {
                    id: item.id,
                },
            });
        }
    };
    const handleScroll = useCallback(async () => {
        //请求下页数据
        let res = await apiGetMessageList({ pageIndex: messageExhibitionState.pageIndex+1, haveRead: 0 });
        if (!res) return;
        freShListState({LoadingStatus:'complete',pageIndex: messageExhibitionState.pageIndex + 1,MessageList: [...messageExhibitionState.MessageList,...res.data]})
    },[freShListState, messageExhibitionState.MessageList, messageExhibitionState.pageIndex])
    return (
        <RootView className={localClassName} style={style} scrollY={true} onScrollToLower={handleScroll}>
            {' '}
            {messageExhibitionState.MessageList.map((item) => (
                <MessageItem
                    handleClick={() => {
                        handleClick(item);
                    }}
                    className="messageitem"
                    isRead={item.haveRead}
                    message={item.content}
                    messageType={item.type}
                    key={item.id}></MessageItem>
            ))}
            <View className="bottom">
                <LoadingComponent
                    style={{ display: messageExhibitionState.MessageList.length > 0 ? 'block' : 'none' }}
                    status={messageExhibitionState.LoadingStatus}></LoadingComponent>
            </View>
        </RootView>
    );
}
export default React.memo(UnreadMessages as FC<IProps>);
const RootView = styled(ScrollView)`
    &.UnreadMessages {
        margin-top: 48px;
        .messageitem + .messageitem {
            margin-top: 64px;
        }
        .bottom {
            width: 100%;
            height: 150px;
        }
    }
`;
